#deep-chat-openai-realtime-container {
  height: 100%;
  width: 100%;
}

#deep-chat-openai-realtime-avatar-container {
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#deep-chat-openai-realtime-avatar {
  border-radius: 50%;
  height: 110px;
  border: 1px solid rgb(215, 215, 215);
  padding: 8px;
  user-select: none;
  margin-top: 20px;
}

#deep-chat-openai-realtime-buttons-container {
  height: 40%;
  display: flex;
  position: relative;
}

.deep-chat-openai-realtime-button-container {
  height: 100%;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.deep-chat-openai-realtime-button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.deep-chat-openai-realtime-button-default {
  background-color: rgb(227, 227, 227);
}

.deep-chat-openai-realtime-button-default:hover {
  background-color: rgb(212, 212, 212);
}

.deep-chat-openai-realtime-button-default:active {
  background-color: rgb(197, 197, 197);
}

.deep-chat-openai-realtime-button-loading {
  opacity: 0.7;
  pointer-events: none;
}

.deep-chat-openai-realtime-microphone-active {
  background-color: rgb(255 231 231);
}

.deep-chat-openai-realtime-microphone-active:hover {
  background-color: rgb(255, 222, 222);
}

.deep-chat-openai-realtime-microphone-active:active {
  background-color: rgb(255, 210, 210);
}

.deep-chat-openai-realtime-microphone > * {
  height: 30px;
  width: 30px;
}

.deep-chat-openai-realtime-microphone-active > * {
  filter: brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(1360%) hue-rotate(325deg) brightness(95%)
    contrast(92%);
}

.deep-chat-openai-realtime-toggle > * {
  height: 32px;
  width: 32px;
  padding-inline-start: 3px;
  filter: brightness(0) saturate(100%) invert(22%) sepia(0%) saturate(4537%) hue-rotate(208deg) brightness(105%)
    contrast(91%);
}

.deep-chat-openai-realtime-button-unavailable {
  opacity: 0.45;
  pointer-events: none;
}

#deep-chat-openai-realtime-error {
  color: red;
  position: absolute;
  top: calc(50% + 40px);
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
}

#deep-chat-openai-realtime-loading {
  position: absolute;
  font-size: 15px;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}
